/*
 * @Description: JS文件渲染的侧边栏，反正挺复杂的，我没咋看懂，但是可以改。
 * @Author: youzi
 * @Date: 2019-07-18 11:26
 * @LastEditTime: 2019-08-16 15:43:09
 * @LastEditors: youzi
 */
import Menu from 'ant-design-vue/es/menu';
import Icon from 'ant-design-vue/es/icon';

// 选择是否有下拉式的，第二种暂时没测试过数据是否显示正常。
const { Item, SubMenu } = Menu;
// const { Item, ItemGroup } = Menu;

export default {
  name: 'IMenu',
  props: {
    menuData: {
      type: Array,
      required: true
    },
    theme: {
      type: String,
      required: false,
      default: 'dark'
    },
    mode: {
      type: String,
      required: false,
      default: 'inline'
    },
    collapsed: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data() {
    return {
      openKeys: [],
      selectedKeys: [],
      cachedOpenKeys: [],
      defaultOpenKeys: []
    };
  },
  computed: {
    rootSubmenuKeys: vm => {
      let keys = [];
      vm.menuData.forEach(item => {
        keys.push(item.path);
      });
      return keys;
    }
  },
  created() {
    this.updateMenu();
  },
  watch: {
    collapsed(val) {
      if (val) {
        this.cachedOpenKeys = this.openKeys;
        this.openKeys = [];
      } else {
        this.openKeys = this.cachedOpenKeys;
      }
    },
    $route: function() {
      this.updateMenu();
    }
  },
  methods: {
    renderIcon: function(h, icon) {
      return icon === 'none'
        ? null
        : h(Icon, {
            props: { type: icon }
          });
    },
    renderMenuItem: function(h, menu, pIndex, index) {
      return h(
        Item,
        {
          key: menu.path ? menu.path : 'item_' + pIndex + '_' + index
        },
        // [h('a', { attrs: { href: '#' + menu.path } }, [this.renderIcon(h, menu.icon), h('span', [menu.name])])]
        [h('a', { attrs: { href: '#' + menu.path } }, [h('span', [menu.name])])]
      );
    },
    renderSubMenu: function(h, menu, pIndex, index) {
      const this2_ = this;
      // let subItem = [h('span', { slot: 'title' }, [this.renderIcon(h, menu.icon), h('span', [menu.name])])];
      let subItem = [h('span', { slot: 'title' }, [h('span', [menu.name])])];
      let itemArr = [];
      let pIndex_ = pIndex + '_' + index;
      menu.children.forEach(function(item, i) {
        itemArr.push(this2_.renderItem(h, item, pIndex_, i));
      });
      return h(SubMenu, { key: menu.path ? menu.path : 'submenu_' + pIndex + '_' + index }, subItem.concat(itemArr));
      // return h(return h(ItemGroup, { key: menu.path ? menu.path : 'submenu_' + pIndex + '_' + index }, subItem.concat(itemArr));, { key: menu.path ? menu.path : 'submenu_' + pIndex + '_' + index }, subItem.concat(itemArr));
    },
    renderItem: function(h, menu, pIndex, index) {
      if (!menu.hidden) {
        return menu.children ? this.renderSubMenu(h, menu, pIndex, index) : this.renderMenuItem(h, menu, pIndex, index);
      }
    },
    renderMenu: function(h, menuTree) {
      const this2_ = this;
      let menuArr = [];
      menuTree.forEach(function(menu, i) {
        if (!menu.hidden) {
          menuArr.push(this2_.renderItem(h, menu, '0', i));
        }
      });
      return menuArr;
    },
    /**
     * @description: 控制是否简洁显示父级菜单
     * @param {string []} 当前将要打开的菜单
     * @return: null
     * @logic: 先找出最新点开的菜单的key，逻辑就是在当前点开的菜单数组中，找到第一个不在原来点开的菜单数组中的key，那么这个key就是当前最新点开的key，再去判断是否在菜单根目录里，因为还有二级菜单三级菜单，如果不在根目录下，就直接让原来的菜单数组等于现在的；如果不在，就再判断是否关闭了所有的菜单，如果关闭了，就赋给空数组。
     */
    onOpenChange(openKeys) {
      /* this.openKeys = openKeys;
      return; */
      // 如果需要开启简洁菜单模式，就把上面两行注释，为了保证正常的兼容性。
      const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1);
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys;
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : [];
      }
    },
    updateMenu() {
      let routes = this.$route.matched.concat();
      if (routes.length >= 4 && this.$route.meta.hidden) {
        routes.pop();
        this.selectedKeys = [routes[2].path];
      } else {
        this.selectedKeys = [routes.pop().path];
      }

      let openKeys = [];
      if (this.mode === 'inline') {
        routes.forEach(item => {
          openKeys.push(item.path);
        });
      }
      // 下一行是判断是否要将菜单收起，这里看后期的需求吧，现在原型图是不收起的，要改成收起的就把下一行注释掉，取消下下一行的注释
      this.collapsed ? (this.cachedOpenKeys = openKeys) : (this.openKeys = openKeys);
    }
  },
  render(h) {
    return h(
      Menu,
      {
        props: {
          theme: this.$props.theme,
          mode: this.$props.mode,
          openKeys: this.openKeys,
          selectedKeys: this.selectedKeys
          // defaultOpenKeys: ''
        },
        on: {
          openChange: this.onOpenChange,
          select: obj => {
            this.selectedKeys = obj.selectedKeys;
            this.$emit('select', obj);
          }
        }
      },
      this.renderMenu(h, this.menuData)
    );
  }
};
